<template>
  <div
    ref="mainRef"
    class="mainEcharts"></div>
</template>

<script lang="ts" setup>
import { graphic, init, type ECharts } from 'echarts'
import { onMounted, ref } from 'vue'
import Debounce from '@/compoase/debounce'
const mainRef = ref()
const props = defineProps<{
  options: {
    xData: string[];
    yData: number[];
    barColor: string[];
  };
}>()
// 初始化Echarts
let myChart: ECharts | null = null
const initEchart = () => {
  myChart === null && (myChart = init(mainRef.value))
  const option = {
    color: [
      '#29F1FA',
      '#5470c6',
      '#91cc75',
      '#fac858',
      '#ee6666',
      '#73c0de',
      '#3ba272',
      '#fc8452',
      '#9a60b4',
      '#ea7ccc'
    ],
    grid: {
      top: '40rem',
      left: '40rem',
      right: '40rem',
      bottom: '25px'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#777'
      },
      splitLine: {
        lineStyle: {
          color: ['#777']
        }
      },
      data: props.options.xData //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#777'
      },
      splitLine: {
        lineStyle: {
          color: ['#777']
        }
      },
      name: '单位：MW'
    },
    series: [
      {
        data: props.options.yData, //[820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        // barWidth: 1,
        barMaxWidth: 10,
        itemStyle: {
          borderRadius: [150, 150, 0, 0],
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: props.options.barColor[0] || '#7EB2FF' },
            { offset: 1, color: props.options.barColor[1] || 'rgba(27,126,242,0)' }
          ])
        }
      }
    ]
  }
  myChart.setOption(option)
}
onMounted(() => {
  initEchart()
})

const debounce = new Debounce()
const resize = debounce.use(() => {
  myChart?.resize()
})
window.addEventListener(
  'resize',
  () => {
    resize()
  },
  { passive: false }
)
</script>

<style lang="scss" scoped>
.mainEcharts {
  height: calc(100% - 4.1rem - 2px);
  padding-left: 10px;
}
</style>
